import './index.less';
import { useEffect, useRef, useState } from 'react';

export interface NestChartProps {
  colorList?: string[];
  data: NestItem[];
}

export interface NestItem {
  x: number;
  y: number;
  img?: any;
  item?: any;
  color?: string;
}

const defaultColorList = ['#5a41b4', '#ffcd00', '#78b4fa'];

function NestChart(props: NestChartProps) {
  const { colorList = defaultColorList, data } = props;
  const ref = useRef<any>();
  const [netWidth, setNetWidth] = useState<number>(0);
  const [list, setList] = useState<NestItem[]>([]);
  const [containerHeight, setContainerHeight] = useState<number>(0);

  useEffect(() => {
    setData();
    setTimeout(() => {
      setWidth();
    });
    window.addEventListener('resize', setWidth);
    return () => {
      window.removeEventListener('resize', setWidth);
    };
  }, []);

  function setData() {
    const dataList = data.map((item) => {
      const bgColor = colorList[Math.floor(Math.random() * 3)];
      return {
        ...item,
        color: item.img || item.color || bgColor,
      };
    });
    setList(dataList);
  }

  function setWidth() {
    const maxX = Math.max(...data.map((item) => item.x)) + 1;
    const maxY = Math.max(...data.map((item) => item.y)) + 1;
    const netWidth = ref.current!.offsetWidth / (0.75 * maxX + 0.25);
    const height = (maxY * Math.pow(3, 1 / 2) * netWidth) / 2;
    setNetWidth(netWidth);
    setContainerHeight(height);
  }

  return (
    <div
      ref={ref}
      style={{ position: 'relative', width: '100%', height: containerHeight }}
    >
      <div className={'role'}>
        <div role={'item'}>
          1
          <div role={'item'}>
            2
            <div role={'item'}>
              3
              <div role={'item'}>
                4
                <div role={'item'}>
                  5<div role={'item'}>6</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/*{list.map((item, index) => {*/}
      {/*  const hover = netWidth * 1.5;*/}
      {/*  return (*/}
      {/*    <div key={index} className={'item'}>*/}
      {/*      <div*/}
      {/*        className={`first`}*/}
      {/*        style={{*/}
      {/*          width: (Math.pow(3, 1 / 2) * netWidth) / 2,*/}
      {/*          height: Number(netWidth),*/}
      {/*          left:*/}
      {/*            (item.x * netWidth * 3) / 4 +*/}
      {/*            ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4,*/}
      {/*          top:*/}
      {/*            ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*            (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*            ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4,*/}
      {/*        }}*/}
      {/*      >*/}
      {/*        <div className="two">*/}
      {/*          <div*/}
      {/*            className="three"*/}
      {/*            style={{ background: item.img ? 'none' : item.color }}*/}
      {/*          >*/}
      {/*            {item.img && <img src={item.img} alt="图片" />}*/}
      {/*          </div>*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*      <div className={`hover`}>*/}
      {/*        <div*/}
      {/*          className={`first first0`}*/}
      {/*          style={{*/}
      {/*            width: (Math.pow(3, 1 / 2) * hover) / 2,*/}
      {/*            height: Number(hover),*/}
      {/*            left:*/}
      {/*              (item.x * netWidth * 3) / 4 +*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4,*/}
      {/*            top:*/}
      {/*              ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*              (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 -*/}
      {/*              netWidth / 4,*/}
      {/*          }}*/}
      {/*        >*/}
      {/*          <div className="two">*/}
      {/*            <div*/}
      {/*              className="three"*/}
      {/*              style={{ background: item.img ? 'none' : item.color }}*/}
      {/*            >*/}
      {/*              {item.img && <img src={item.img} alt="图片" />}*/}
      {/*            </div>*/}
      {/*          </div>*/}
      {/*        </div>*/}
      {/*        <div*/}
      {/*          className={'div'}*/}
      {/*          style={{*/}
      {/*            background: '#fff',*/}
      {/*            position: 'absolute',*/}
      {/*            width: 200,*/}
      {/*            borderTop: '1px solid #ddd',*/}
      {/*            borderBottom: '1px solid #ddd',*/}
      {/*            height: (Math.pow(3, 1 / 2) * hover) / 2,*/}
      {/*            left:*/}
      {/*              (item.x * netWidth * 3) / 4 +*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * (netWidth - hover)) / 4 +*/}
      {/*              (hover * 3) / 4,*/}
      {/*            top:*/}
      {/*              ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*              (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 -*/}
      {/*              netWidth / 4 +*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * hover) / 4,*/}
      {/*          }}*/}
      {/*        >*/}
      {/*          123*/}
      {/*        </div>*/}
      {/*        <div>*/}
      {/*          {[0, 1, 2].map((i) => (*/}
      {/*            <div*/}
      {/*              style={{*/}
      {/*                transform: `rotate(-${60 * i}deg)`,*/}
      {/*                borderTop: '1px solid #ddd',*/}
      {/*                zIndex: 1003,*/}
      {/*                position: 'absolute',*/}
      {/*                width: hover / 2,*/}
      {/*                height: (Math.pow(3, 1 / 2) * hover) / 2,*/}
      {/*                background: 'transparent',*/}
      {/*                left:*/}
      {/*                  (item.x * netWidth * 3) / 4 +*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 +*/}
      {/*                  ((Math.pow(3, 1 / 2) - 1) * hover) / 4,*/}
      {/*                top:*/}
      {/*                  ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*                  (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 -*/}
      {/*                  netWidth / 4 +*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * hover) / 4,*/}
      {/*              }}*/}
      {/*            />*/}
      {/*          ))}*/}
      {/*          {[1, 2].map((i) => (*/}
      {/*            <div*/}
      {/*              style={{*/}
      {/*                transform: `rotate(${60 * i}deg)`,*/}
      {/*                borderTop: '1px solid #ddd',*/}
      {/*                zIndex: 1001,*/}
      {/*                position: 'absolute',*/}
      {/*                width: hover / 2,*/}
      {/*                height: (Math.pow(3, 1 / 2) * hover) / 2,*/}
      {/*                background: 'transparent',*/}
      {/*                left:*/}
      {/*                  (item.x * netWidth * 3) / 4 +*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 +*/}
      {/*                  ((Math.pow(3, 1 / 2) - 1) * hover) / 4 +*/}
      {/*                  200,*/}
      {/*                top:*/}
      {/*                  ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*                  (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 -*/}
      {/*                  netWidth / 4 +*/}
      {/*                  ((2 - Math.pow(3, 1 / 2)) * hover) / 4,*/}
      {/*              }}*/}
      {/*            />*/}
      {/*          ))}*/}
      {/*        </div>*/}
      {/*        <div*/}
      {/*          className={`first first1`}*/}
      {/*          style={{*/}
      {/*            width: (Math.pow(3, 1 / 2) * hover) / 2,*/}
      {/*            height: Number(hover),*/}
      {/*            left:*/}
      {/*              (item.x * netWidth * 3) / 4 +*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 +*/}
      {/*              200,*/}
      {/*            top:*/}
      {/*              ((item.x % 2) * Math.pow(3, 1 / 2) * netWidth) / 4 +*/}
      {/*              (+item.y * Math.pow(3, 1 / 2) * netWidth) / 2 -*/}
      {/*              ((2 - Math.pow(3, 1 / 2)) * netWidth) / 4 -*/}
      {/*              netWidth / 4,*/}
      {/*          }}*/}
      {/*        >*/}
      {/*          <div className="two">*/}
      {/*            <div className="three" style={{ background: '#fff' }}></div>*/}
      {/*          </div>*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  );*/}
      {/*})}*/}
    </div>
  );
}

export default function Page() {
  const [data, setData] = useState<any[]>([]);
  const list = [
    { x: 1, y: 0 },
    { x: 1, y: 0 },
    { x: 0, y: 1 },
    { x: 1, y: 1 },
    { x: 0, y: 2 },
    { x: 2, y: 1 },
    { x: 3, y: 1 },
    { x: 4, y: 1 },
    { x: 5, y: 1 },
    { x: 6, y: 1 },
    { x: 7, y: 1 },
    { x: 8, y: 1 },
    { x: 9, y: 1 },
    { x: 9, y: 0 },
    { x: 10, y: 2 },
    { x: 10, y: 3 },
    { x: 10, y: 4 },
    { x: 0, y: 4 },
    { x: 1, y: 4 },
    { x: 0, y: 5 },
    { x: 2, y: 5 },
    { x: 4, y: 5 },
    { x: 5, y: 4 },
    { x: 6, y: 5 },
    { x: 9, y: 4 },
    { x: 10, y: 5 },
  ];

  useEffect(() => {
    const dataList = [];
  }, []);

  return <NestChart data={list} />;
}
